import React from 'react';
import { connect } from 'umi';
import { Menu, Layout } from 'antd';
import styles from './index.less';
import SelectC from './form/selectC';
import InputC from './form/InputC';
import InputNumberC from './form/inputNumberC';
import TreeSelectC from './form/treeSelectC';
import FormUpLoadC from './form/formUpload';
import SingleDateC from './form/SingleDateC';
import SimpleWeekC from './form/simpleWeekC';
import SimpleQuarterC from './form/simpleQuarterC';
import SimpleRangeDateC from './form/simpleRangeDateC';
import RangeDateC from './form/rangeDateC';
import ComplexDateC from './form/complexDateC';
import AutoComleteC from './form/AutoComleteC';
import AdvanceSearchC from './advanceSearch';
import FormGroupC from './formGroup';
import RangeSelectC from './form/RangeSelectC';
import AllFromUmiC from './AllFromUmi';
import AhooksC from './Ahooks';
import BigEventC from './echarts/bigEvent';
import XYAxisChartsC from './echarts/xyAxisCharts';
import XYHorizontalChartsC from './echarts/xyHorizontalChart';
import CandlestickC from './echarts/candlestickCharts';
import LinkageChartsC from './echarts/linkageCharts';
import TreemapChartC from './echarts/treemapChart';
import TreeCharts from './echarts/tree';
import AreaChartsCDemo from './echarts/areaEcharts';
import PanelEchartsDemo from './echarts/panelEcahrts';
import MapEcharts from './echarts/MapEcharts';
import DemoLineChartsC from './echarts/DemoLineChartsC';
import TableC from './table/table';
import BigDataTable from './table/bigDataTable';
import BigDataNestedTable from './table/bigDatanestedTable';
import ModalC from './other/modalC';
import CardCDemo from './other/cardC';
import CollectCDemo from './other/collectC';
import ContentPackageDemo from './other/contentPackage';
import FirstHeaderC from './other/firstHeader';
import FixedButton from './other/fixedButton';
import IconCDemo from './other/iconC';
import InfoTip from './other/InfoTips';
import MilepostC from './other/milepostC';
import NoDataC from './other/noData';
import NoDataGrayC from './other/noDataGray';
import NoQueryC from './other/noQuery';
import QuickQueryC from './other/quickQuery';
import SecondHeaderC from './other/secondHeader';
import TabsC from './other/tabsC';
import ThreeHeaderC from './other/threeHeader';
import NestedTableDemo from './table/nestedTable';
import Export from './other/export';
import ParseExcel from './other/parseExcel';
import ExportPDF from './exportPDF';
// 业务
import ProductListC from './business/product/productListC';
import ProductGroupTreeC from './business/product/productGroupTreeC';
import ProductGroupSepC from './business/product/productGroupSepC';
import ProductGroupC from './business/product/productGroupC';
import SearchAndSelect from './business/searchAndSelect';
import BenchMark from './business/benchMark';
import ChildBenchMark from './business/childBenchMark';
import SeriesProduct from './business/seriesProduct';
import Address from './business/address';
import TradingMarket from './business/tradingMarket';
import TradingDirect from './business/tradingDirect';
import TradingType from './business/tradingType';
import SeriesProductGroup from './business/seriesProduct/seriesProductGroupC';
import AvailableAsset from './business/availableAsset';
import TradHold from './business/tradeHold';
import BusinessTarget from './business/BusinessTarget';
import SecuritiesCodeC from './business/securitiesCode';
import TradingCompany from './business/tradingCompany';
import IndustryC from './business/industry';
import WinBondTypeC from './business/winBondType';
import TenantC from './business/tenant';
import RateRangeC from './business/rateRangeC';
import FundApplicationIndustry from './business/fundApplicationIndustry/fundApplicationIndustry';
import SppIResult from './business/sppiResult';

// Bpmn
import BPMNOperation from './bpmn/page/operation';
import BPMNDisplay from './bpmn/page/display';

// 其他
import StepDemo from './other/stepC';
import NoDataMaskC from './other/TheMaskLayer';
import UploadCDemo from './other/upload';
import VideoDemo from './other/videoDemo';
import NormalCardC from './other/normalCardC';
import LineConnect from './other/lineConnect';
import Websockets from './other/websocket';

import ExportWord from './ExportWord';
import DomToImage from './DomToImage';
// excel导出
import ExportTableBaseDate from './other/ExportExcelComps/exportTableBaseDate';
import GroupHeader from '@/src/newDemo/other/ExportExcelComps/GroupHeader';
import SettingCellStyle from '@/src/newDemo/other/ExportExcelComps/SettingCellStyle';
import SettingRowStyle from '@/src/newDemo/other/ExportExcelComps/SettingRowStyle';
import MoreSheet from '@/src/newDemo/other/ExportExcelComps/MoreSheet';
import SettingOverallStyle from '@/src/newDemo/other/ExportExcelComps/SettingOverallStyle';
import TableRowColMerge from '@/src/newDemo/other/ExportExcelComps/TableRowColMerge';
import FormOtherCDemo from './form/formOtherC';
import SceneCardCDemo from './other/sceneCardC';

const { Header, Content } = Layout;

class newDemo extends React.PureComponent {
  menuList = [
    { key: '11', name: '产品列表', component: <ProductListC /> },
    { key: '12', name: '组合树', component: <ProductGroupTreeC /> },
    { key: '13', name: '产品组合联动组件', component: <ProductGroupSepC /> },
    { key: '14', name: '证券代码', component: <SecuritiesCodeC /> },
    { key: '24', name: '证券代码（精确/模糊查询）', component: <SearchAndSelect /> },
    { key: '15', name: '基准', component: <BenchMark /> },
    { key: '25', name: '子基准', component: <ChildBenchMark /> },
    { key: '16', name: '系列产品', component: <SeriesProduct /> },
    { key: '17', name: '省市', component: <Address /> },
    { key: '18', name: '交易市场', component: <TradingMarket /> },
    { key: '19', name: '交易方向', component: <TradingDirect /> },
    { key: '20', name: '系列产品+名称', component: <SeriesProductGroup /> },
    { key: '30', name: '行业', component: <IndustryC /> },
    { key: '111', name: '交易类型', component: <TradingType /> },
    { key: '112', name: '交易对手', component: <TradingCompany /> },
    { key: '113', name: '资金可用', component: <AvailableAsset /> },
    { key: '114', name: '持仓可用', component: <TradHold /> },
    { key: '115', name: '产品组列表', component: <ProductGroupC /> },
    { key: '116', name: 'win债券类型', component: <WinBondTypeC /> },
    { key: '120', name: '租户', component: <TenantC /> },
    { key: '121', name: '评级区间', component: <RateRangeC /> },
    { key: '122', name: '资金运用行业', component: <FundApplicationIndustry /> },
    { key: '123', name: 'sppi目标结果', component: <SppIResult /> },
    { key: '124', name: '业务目标', component: <BusinessTarget /> },
    { key: '21', name: '查询组件', component: <AdvanceSearchC /> },
    { key: '211', name: 'form集合组件', component: <FormGroupC /> },
    { key: 'umi', name: '导入从umi', component: <AllFromUmiC /> },
    { key: 'ahooks', name: 'ahooks', component: <AhooksC /> },
    // { key: '212', name: '一排一个以及一排两个自适应', component: <FormGroupOneTwoC /> },

    { key: '31', name: '普通表格', component: <TableC /> },
    // { key: '32', name: '嵌套表格', component: <NestingC /> },
    { key: '34', name: '嵌套表格New', component: <NestedTableDemo /> },
    // // { key: '33', name: '固定表头', component: <FixedHeader /> },
    { key: '41', name: '模态框', component: <ModalC /> },
    { key: '42', name: '一级标题', component: <FirstHeaderC /> },
    { key: '43', name: '二、三级标题', component: <SecondHeaderC /> },
    // { key: '44', name: '按钮组件', component: <ButtonC /> },
    { key: '45', name: '快速查询按钮', component: <QuickQueryC /> },
    { key: '46', name: '无查询', component: <NoQueryC /> },
    { key: '47', name: '无数据', component: <NoDataC /> },
    { key: '48', name: '无数据蒙层', component: <NoDataGrayC /> },
    { key: '50', name: '模糊背景蒙层', component: <NoDataMaskC /> },

    { key: '49', name: '日期进度条', component: <MilepostC /> },
    // { key: '410', name: '公共函数', component: <CommonFuncDemo /> },
    // { key: '411', name: '自定义form', component: <SelfDefFormDemo /> },
    // { key: '421', name: '前端自导出', component: <ExportFrontEnd /> },
    { key: '425', name: 'demo自写', component: <ExportTableBaseDate /> },
    { key: '426', name: '表头分组导出', component: <GroupHeader /> },
    { key: '427', name: '多sheet页', component: <MoreSheet /> },
    { key: '428', name: '设置单元格样式', component: <SettingCellStyle /> },
    { key: '429', name: '设置行样式', component: <SettingRowStyle /> },
    { key: '430', name: '设置整体样式', component: <SettingOverallStyle /> },
    { key: '431', name: '表格行列合并', component: <TableRowColMerge /> },
    { key: '412', name: '附件上传/文件导入', component: <UploadCDemo /> },
    { key: '413', name: '图标', component: <IconCDemo /> },
    { key: '414', name: '卡片', component: <CardCDemo /> },
    { key: '439', name: '多功能卡片', component: <SceneCardCDemo /> },
    { key: '415', name: '消息提示', component: <InfoTip /> },
    { key: '416', name: '悬浮按钮', component: <FixedButton /> },
    { key: '417', name: '文件导出', component: <Export /> },
    { key: '418', name: '导出PDF', component: <ExportPDF /> },
    { key: 'parseExcel', name: '解析excel', component: <ParseExcel /> },
    { key: 'exportWord', name: '导出Word', component: <ExportWord /> },
    { key: 'domToImage', name: 'Dom元素转图片', component: <DomToImage /> },
    { key: '419', name: '连接两个dom', component: <LineConnect /> },
    { key: '420', name: '连接websocket', component: <Websockets /> },
    { key: '422', name: '汇总条目', component: <CollectCDemo /> },
    { key: '423', name: 'tabs', component: <TabsC /> },
    { key: '424', name: '视频播放', component: <VideoDemo /> },
    { key: '436', name: 'ContentPackage', component: <ContentPackageDemo /> },
    { key: '435', name: 'step步骤', component: <StepDemo /> },
    { key: '437', name: '三级标题', component: <ThreeHeaderC /> },
    { key: '438', name: 'normalCard', component: <NormalCardC /> },
    { key: '51', name: '纵向echarts图', component: <XYAxisChartsC /> },
    { key: '52', name: '横向echarts图', component: <XYHorizontalChartsC /> },
    { key: '53', name: '大事记图', component: <BigEventC /> },
    { key: '54', name: '上下联动图', component: <LinkageChartsC /> },
    { key: '55', name: '矩形树图', component: <TreemapChartC /> },
    { key: '56', name: '树形结构图', component: <TreeCharts /> },
    { key: '57', name: 'K线图', component: <CandlestickC /> },
    { key: '58', name: '饼状图', component: <DemoLineChartsC /> },
    { key: '59', name: '仪表盘', component: <PanelEchartsDemo /> },
    { key: '61', name: '复杂时间范围', component: <ComplexDateC /> },
    { key: '62', name: '简单时间范围', component: <RangeDateC /> },
    { key: '63', name: '下拉选择', component: <SelectC /> },
    { key: '64', name: '单时间', component: <SingleDateC /> },
    // { key: '65', name: '所有form类型', component: <AllFormTypeDemo /> },
    { key: '66', name: '树形下拉控件', component: <TreeSelectC /> },
    { key: '67', name: '自定义时间组件（支持季度）', component: <SimpleQuarterC /> },
    { key: '71', name: '流程图展示', component: <BPMNDisplay /> },
    { key: '72', name: '流程图操作', component: <BPMNOperation /> },
    { key: '73', name: '表格大量数据优化加载', component: <BigDataTable /> },
    // { key: '81', name: '表格大量数据优化加载', component: <TestTable /> },
    { key: '74', name: '我的echarts', component: <AreaChartsCDemo /> },
    { key: '75', name: '地图+旭日图', component: <MapEcharts /> },
    { key: '76', name: '嵌套表格大量数据加载', component: <BigDataNestedTable /> },
    // { key: '80', name: '导出PDF', component: <PdfImport /> },
    { key: '68', name: 'Input组件', component: <InputC /> },
    { key: '69', name: 'InputNumberC组件', component: <InputNumberC /> },
    { key: '610', name: 'RangeSelectC组件', component: <RangeSelectC /> },
    { key: '612', name: 'FormUpLoadC组件', component: <FormUpLoadC /> },
    { key: '613', name: 'SimpleWeekC组件', component: <SimpleWeekC /> },
    { key: '614', name: 'SimpleRangeDateC组件', component: <SimpleRangeDateC /> },
    { key: '611', name: 'AutoComleteC组件', component: <AutoComleteC /> },
    { key: '615', name: '自定义form', component: <FormOtherCDemo /> },
  ];

  menuItems = [
    {
      label: '业务组件',
      key: '1',
      children: [
        { label: '产品组件', key: '11' },
        { label: '组合组件', key: '12' },
        { label: '证券代码', key: '14' },
        { label: '证券代码（精确/模糊查询）', key: '24' },
        { label: '产品组合联动组件', key: '13' },
        { label: '基准', key: '15' },
        { label: '子基准', key: '25' },
        { label: '系列产品', key: '16' },
        { label: '系列产品+名称', key: '20' },
        { label: '省市', key: '17' },
        { label: '交易市场', key: '18' },
        { label: '交易方向', key: '19' },
        { label: '交易类型', key: '111' },
        { label: '资金可用', key: '113' },
        { label: '持仓可用', key: '114' },
        { label: '产品组列表', key: '115' },
        { label: '交易对手', key: '112' },
        { label: '行业', key: '30' },
        { label: 'win债券类型', key: '116' },
        { label: '租户', key: '120' },
        { label: '评级区间', key: '121' },
        { label: '资金运用行业', key: '122' },
        { label: 'sppi目标结果', key: '123' },
        { label: '业务目标内容', key: '124' },
      ],
    },
    {
      label: 'form表单',
      key: '6',
      children: [
        { label: '复杂时间区间', key: '61' },
        { label: '简单时间范围', key: '62' },
        { label: '下拉选择', key: '63' },
        { label: '单时间', key: '64' },
        { label: '树形下拉控件', key: '66' },
        { label: '自定义时间组件（支持季度）', key: '67' },
        { label: 'Input组件', key: '68' },
        { label: 'InputNumberC组件', key: '69' },
        { label: 'RangeSelectC组件', key: '610' },
        { label: 'FormUpLoadC组件', key: '612' },
        { label: 'SimpleWeekC组件', key: '613' },
        { label: 'SimpleRangeDateC组件', key: '614' },
        { label: 'AutoComleteC组件', key: '611' },
        { label: '自定义form表单', key: '615' },
      ],
    },
    {
      label: '查询组件',
      key: '7',
      children: [{ label: '查询组件', key: '21' }],
    },
    {
      label: 'form集合组件',
      key: '8',
      children: [{ label: 'form集合组件', key: '211' }],
    },
    {
      label: '其他组件',
      key: '4',
      children: [
        { label: '模态框', key: '41' },
        { label: '一级标题', key: '42' },
        { label: '二、三级标题', key: '43' },
        { label: '按钮', key: '44' },
        { label: '快速查询按钮', key: '45' },
        { label: '无查询', key: '46' },
        { label: '无数据', key: '47' },
        { label: '无数据蒙层', key: '48' },
        { label: '模糊背景蒙层', key: '50' },
        { label: '日期进度条', key: '49' },
        { label: '公共函数', key: '410' },
        { label: '测试自定义form', key: '411' },
        { label: '附件上传/文件导入', key: '412' },
        { label: '图标', key: '413' },
        { label: '卡片', key: '414' },
        { label: '多功能卡片', key: '439' },
        { label: '消息提示', key: '415' },
        { label: '悬浮按钮', key: '416' },
        { label: '文件导出', key: '417' },
        { label: '前端自导出', key: '421' },
        {
          label: '基于数据导出表格',
          key: '4.1',
          children: [
            { label: '基于数据导出表格', key: '425' },
            { label: '表格行列合并导出（基于库）', key: '426' },
            { label: '多sheet页（基于库）', key: '427' },
            { label: '设置单元格样式（基于库）', key: '428' },
            { label: '设置行样式（基于库）', key: '429' },
            { label: '设置整体样式（基于库）', key: '430' },
            { label: '表格行列合并（基于库）', key: '431' },
          ],
        },
        { label: '解析excel', key: 'parseExcel' },
        { label: '导出PDF', key: '418' },
        { label: '连接两个dom', key: '419' },
        { label: '导出Word', key: 'exportWord' },
        { label: 'Dom元素转图片', key: 'domToImage' },
        { label: '连接websocket', key: '420' },
        { label: '汇总条目', key: '422' },
        { label: 'tabs', key: '423' },
        { label: '视频播放', key: '424' },
        { label: 'stepC步骤', key: '435' },
        { label: 'contentPackage', key: '436' },
        { label: '三级标题单独demo', key: '437' },
        { label: 'normalCardC单独demo', key: '438' },
      ],
    },
    {
      label: 'echarts组件',
      key: '5',
      children: [
        { label: '纵向echarts图', key: '51' },
        { label: '横向echarts图', key: '52' },
        { label: '大事记图', key: '53' },
        { label: '上下联动图', key: '54' },
        { label: '矩形树图', key: '55' },
        { label: '我的echarts图', key: '74' },
        { label: '地图', key: '75' },
        { label: '树形结构图', key: '56' },
        { label: 'K线图', key: '57' },
        { label: '饼状图', key: '58' },
        { label: '仪表盘', key: '59' },
      ],
    },
    {
      label: '常用的的钩子函数',
      key: '9',
      children: [
        { label: '从umi导入一切', key: 'umi' },
        { label: 'ahooks', key: 'ahooks' },
      ],
    },
    {
      label: '表格组件',
      key: '10',
      children: [
        { label: '普通表格', key: '31' },
        { label: '嵌套表格', key: '34' },
        { label: '表格大量数据优化加载', key: '73' },
        { label: '嵌套表格大量数据加载', key: '76' },
      ],
    },
    {
      label: '流程图',
      key: '771',
      children: [
        { label: '流程图展示', key: '71' },
        { label: '流程图操作', key: '72' },
      ],
    },
  ];

  constructor(props) {
    super(props);

    this.state = {
      selectKey: '69',
      openKey: '4',
    };
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'globalM/fetchDataDictionary',
    });
  }

  changeMenu = (e) => {
    this.setState({
      selectKey: e.key,
    });
  };

  render() {
    return (
      <div className={styles.demo}>
        <Header className={styles.header}>组件Demo</Header>
        <Layout style={{ display: 'flex', flexDirection: 'row', background: 'white' }}>
          <div className={styles.menu} style={{ height: 'calc(100vh - 64px)' }}>
            <Menu
              items={this.menuItems}
              onClick={this.changeMenu}
              style={{ width: 256 }}
              defaultSelectedKeys={[this.state.selectKey]}
              defaultOpenKeys={[this.state.openKey]}
              mode='inline'
            />
          </div>

          <Content
            style={{ border: '1px solid lightgray', height: 'calc(100vh - 80px)', width: 'calc(100vw - 220px)', marginLeft: '16px', overflowY: 'scroll', overflowX: 'auto' }}
          >
            {this.menuList.find((item) => item.key === this.state.selectKey)?.component}
          </Content>
        </Layout>
      </div>
    );
  }
}

export default connect(({ globalM }) => ({ globalM }))(newDemo);
